<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="./common/underscore.js"></script>
		<script type="text/javascript" src="./common/backbone.js"></script>

		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Routes. The Backbone way.</title>
	</head>
	<body>
		<div style="height:300px; width:200px" id="app1_here"></div>
		
		
		<script type="text/javascript" charset="utf-8">
			var routes = new (Backbone.Router.extend({
				routes:{
					"":"index", 
					"films/:id":"details"
				},
				details:function(id){
					template.render();
				},
				index:function(){
					layout.render();
					$$("mylist").attachEvent("onAfterSelect", function(id){
						routes.navigate("films/"+id, { trigger:true });
					});
				}
			}));

			var layout = new WebixView({
				el:"#app1_here",
				config:{
					rows:[
						{ template:"Click on item", type:"header" },
						{
							view:"list", url:"common/data.json",
							template:"#title#", select:true,
							id:"mylist"
						}
					]
				}
			});

			DView = Backbone.View.extend({
				el:"#app1_here",
			    tagName: "div",
				render: function(){
			        $(this.el).html("Details page<br>not implemented :)<br><button onclick='history.back()'>Back</button>");
			    },
			});
			var template = new DView();


			//init app
			Backbone.history.start();
			
		</script>
	</body>
</html>